<template>
    <div class="introduce_box">
        <div class="tab_box">
            <div :class="tabId == 1 ? 'tab_box_color' : ''" @click="changeTab(1)">权益介绍</div>
            <div :class="tabId == 2 ? 'tab_box_color' : ''" @click="changeTab(2)">使用规则</div>
        </div>
        <div class="text_box" v-if="tabId == 1" v-html="Description">

        </div>
        <div class="text_box" v-if="tabId == 2" v-html="UseRuleDescription">

        </div>
        <!-- <div class="refund_box">
            <div class="refund_label">退款规则</div>
            <div class="refund_list" v-for="item in refundMsg" :key="item.id">{{ item.regulation }}</div>
            <div class="refund_btn_box" v-if="rightsType == 'YG' && IsRefund != 0 ">
                <div class="refund_btn" @click="onRefundzh()">申请退款</div>
                <div class="refund_btn" @click="onRefund()">申请退款</div>
                <div class="refund_btn" @click="onRefundRecord()">查看退款记录</div>
            </div>

        </div> -->
    </div>
</template>
<script>
export default {
    name: "introduce", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
        return {
            octopus: this.$parent.octopus,
            tabId: 1,
            refundMsg: [
                {
                    id: 1,
                    regulation: '申请退款日距权益使用截止日期前10天支持退款100%'
                },
                {
                    id: 2,
                    regulation: '申请退款日距权益使用截止日期前5天支持退款80%'
                },
                {
                    id: 3,
                    regulation: '申请退款日距权益使用截止日期前1天支持退款50%'
                }
            ]
        }
    },
    props: {
        // 使用规则描述
        UseRuleDescription:{
            type: String,
            default: '',
        },
        // 权益内容
        Description: {
            type: String,
            default: '',
        },
        // 权益类型
        rightsType: {
            type: String,
            default: '',
        },
        IsRefund:{
            type: String,
            default: '',
        }
    },
    created() {
    },
    methods: {
        changeTab(e) {
            this.tabId = e
        },
        onRefund() {
            this.$emit('openDrawer', 'Refund')
        },
        onRefundzh() {
            this.$emit('onRefundzh')
        },
        onRefundRecord() {
            this.$emit('openDrawer', 'Record')
        }
    },
}
</script>
<style scoped>
.introduce_box .tab_box {
    display: flex;
    font-size: 1.7rem;
    border-bottom: 1px solid rgba(30, 27, 25, .1);
    margin-top: 5rem;
}

.introduce_box .tab_box>div {
    padding-bottom: .5rem;
    margin-right: 4rem;
    cursor: pointer;
}

.tab_box_color {
    border-bottom: 4px solid #F78C52;
}

.introduce_box .text_box {
    width: 100%;
    color: #1E1B19;
    line-height: 3.5rem;
    font-size: 1.6rem;
    margin-top: 2rem;
    text-indent: 2em;
    /* 设置2个em单位的首行缩进 */
}

>>> .text_box img {
    max-width: 95%;
    margin: 1rem 0;
}

.refund_box {
    display: flex;
    flex-direction: column;
}

.refund_label {
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 1rem;
    padding-top: 3rem;
    border-top: .1rem solid #b1b1b1;
}

.refund_list {
    font-size: 1.6rem;
    margin: .8rem 0;
    color: #646464;

}

.refund_btn {
    display: flex;
    width: 13rem;
    height: 4rem;
    color: #fff;
    background-color: #343434;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    align-self: end;
    cursor: pointer;
}
.refund_btn_box{
    display: flex;
    align-self: end;
}
</style>